<template>
	<div class="p p4">
		<div class="p4context">
			<h1 :class="{'slidein':index==4}">专业技能</h1>
			<ul>
				<li :class="{'liin':index==4}">
					HTML <div><span :class="{'shanchang':index==4}"
							style="display: block;width: 300px;height: 20px;">擅长</span></div>
				</li>
				<li :class="{'liin':index==4}" style="animation-delay: .1s;">
					css <div><span :class="{'shanchang':index==4}"
							style="display: block;width: 300px;height: 20px;">擅长</span></div>
				</li>
				<li :class="{'liin':index==4}" style="animation-delay: .2s;">
					JavaScript <div><span :class="{'shanchang':index==4}"
							style="display: block;width: 300px;height: 20px;">擅长</span></div>
				</li>
				<li :class="{'liin':index==4}" style="animation-delay: .3s;">
					JQuery <div><span :class="{'shuxi':index==4}"
							style="display: block;width: 200px;height: 20px;">熟悉</span></div>
				</li>
				<li :class="{'liin':index==4}" style="animation-delay: .4s;">
					Vue <div><span :class="{'shuxi':index==4}"
							style="display: block;width: 200px;height: 20px;">熟悉</span></div>
				</li>
				<li :class="{'liin':index==4}" style="animation-delay: .4s;">
					微信小程序 <div><span :class="{'shuxi':index==4}"
							style="display: block;width: 200px;height: 20px;">熟悉</span></div>
				</li>
				<li :class="{'liin':index==4}" style="animation-delay: .5s;">
					Mysql <div><span :class="{'liaojie':index==4}"
							style="display: block;width: 100px;height: 20px;">了解</span></div>
				</li>
				<li :class="{'liin':index==4}" style="animation-delay: .6s;">
					PS <div><span :class="{'liaojie':index==4}"
							style="display: block;width: 100px;height: 20px;">了解</span></div>
				</li>
				<li :class="{'liin':index==4}" style="animation-delay: .7s;">
					Java <div><span :class="{'liaojie':index==4}"
							style="display: block;width: 100px;height: 20px;">了解</span></div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: ["index"]
	}
</script>

<style>
	.p4 {
		background-color: #333333;
		color: white;
		text-align: left;
		position: relative;
	}

	.p4>.p4context {
		padding: 20px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.p4>.p4context>h1 {
		font-size: 50px;
	}

	.p4>.p4context>ul {
		padding: 30px;
		width: 600px;
	}

	.p4>.p4context>ul>li {
		width: 600px;
		margin: 30px 0;
		font-size: 24px;
		position: relative;
	}

	.p4>.p4context>ul>li:hover{
		transform: scale(1.1);
	}

	.p4>.p4context>ul>li>div {
		width: 400px;
		height: 20px;
		position: absolute;
		top: 5px;
		left: 150px;
		border-radius: 5px;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
	}

	.p4>.p4context>ul>li>div>span {
		text-align: center;
		font-size: 14px;
	}

	@keyframes liin {
		25% {
			transform: translateX(-20px);
			opacity: 0.5;
		}

		50% {
			transform: translateX(10px);
			opacity: 1;
		}

		100% {
			transform: translateX(0px);
			opacity: 1;
		}
	}

	.liin {
		animation: liin 3s linear;
	}

	@keyframes slidein {
		25% {
			transform: translateY(-15px);
			opacity: 0;
		}

		50% {
			transform: translateY(10px);
			opacity: 0.5;
		}

		100% {
			transform: translateY(0px);
			opacity: 1;
		}
	}

	.slidein {
		animation: slidein 2s linear;
	}

	@keyframes sc {
		from {
			width: 0;
		}

		to {
			width: 300px;
		}
	}

	@keyframes sx {
		from {
			width: 0;
		}

		to {
			width: 200px;
		}
	}

	@keyframes lj {
		from {
			width: 0;
		}

		to {
			width: 100px;
		}
	}

	.shanchang {
		background-color: #66B1FF;
		animation: sc 2s ease;
	}

	.shuxi {
		background-color: #67C23A;
		animation: sx 2s ease;
	}

	.liaojie {
		background-color: #EBB563;
		animation: lj 2s ease;
	}
</style>
